<template>
    <div>
        <el-form>
            <table>
                <tr>
                    <td colspan="4">
                        <el-button type="primary" style="display:flex;justify-content:flex-start;margin:5px;"
                        @click="showNewRole=true,roleName='',roleDesc='',permissions=''">新增角色</el-button>
                    </td>
                </tr>
                <tr>
                    <td>角色名字</td>
                    <td>角色描述</td>
                    <td>详情</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,key) in allRolePermission" :key="key">
                    <td >{{item.roleName}}</td>
                    <td>{{item.roleDesc}}</td>
                    <td> </td>
                    <td>
                        <div>
                            <el-button type="primary" @click="editroles=true,defaultRole=item">编辑角色</el-button>
                            <el-button type="danger" @click.stop="delectedRoleBtn(item)">删除角色</el-button>
                        </div>
                    </td>
                </tr>
            </table>
        </el-form>
        <addrole-menage
        :showNewRole="showNewRole"
        />
        <edit-roles
        :editroles='editroles'
        :defaultRole='defaultRole'
        />
    </div>
</template>
<script>
import AddroleMenage from './AddroleMenage'
import EditRoles from "./EditRoles"
export default {
    components:{AddroleMenage,EditRoles},
    data(){
        return {
            showNewRole:false,
            editroles:false,
            defaultRole:{}
        }
    },
    computed:{
       allRolePermission(){
        //    console.log("角色的数据")
        //    console.log(this.$store.getters.allRolePermission)
            return this.$store.getters.allRolePermission;
       }
    },
    methods:{
        delectedRoleBtn(item){
            this.$http.post(this.$apis.deleterole,{_id:item._id})
            .then((resp)=>{
                this.$message({
                    message:resp.data.message,
                    type:resp.data.success?"success":"danger"
                });
                if(resp.data.success){
                    this.$store.dispatch('loadrolepermission')
                }
            })
        }
    },
    mounted(){
         this.$store.dispatch('loadrolepermission')
    }

}
</script>
<style lang="scss" scoped>
    table{
        width: 80%;
        border: 1px solid #cccccc;
       tr{
           width: 100%;
           height: 50px;
           border-bottom:1px solid #cccccc;
           &:hover{
               background:rgba(225, 246, 252, 0.8);
           }

           td{
               line-height: 50px;
               border-right: 1px solid #cccccc;
           } 
       }
    }
</style>
